<template>
	<view class="content">
		<a-demo title="基础使用" desc="通过 ratio 属性设置块元素的宽高比例">
			<view class="grid">
				<view class="grid-item" v-for="i in 9" :key="i">
					<pure-block>
						<view class="grid-item-content">内容</view>
					</pure-block>
				</view>
			</view>
		</a-demo>

		<a-demo title="自定义宽高比" desc="16/9">
			<view class="grid">
				<view class="grid-item" v-for="i in 9" :key="i">
					<pure-block ratio="16/9">
						<view class="grid-item-content">内容</view>
					</pure-block>
				</view>
			</view>
		</a-demo>
	</view>
</template>

<script setup>
import { ref } from "vue";
</script>

<style scoped>
.grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.grid-item-content {
	background: var(--pure-background-element);
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-weight: 600;
}
</style>
